<!--
* @author wn
* @date 2023/08/22 15:04:29
* @description: 商品详情
* 登录前:展示商品信息，轮播图交互 (当前模块)
* 登录后:加入购物车，立即购买(SKU 模块)
!-->
<template>
	<!-- 骨架屏 -->
	<GoodsSkeleton v-if="!goodsResult" />
	<scroll-view v-else scroll-y enable-back-to-top class="scroll-view">
		<!-- 基本信息 -->
		<!-- 商品主图 -->
		<view class="preview">
			<swiper circular @change="onChange">
				<swiper-item v-for="item in goodsResult?.mainPictures" :key="item">
					<image mode="aspectFill" :src="item" @tap="onTapImage(item)" />
				</swiper-item>
			</swiper>
			<view class="indicator">
				<text class="current">{{ currentIndex + 1 }}</text>
				<text class="split">/</text>
				<text class="total">{{ goodsResult?.mainPictures.length }}</text>
			</view>
		</view>
		<!-- 商品简介 -->
		<view class="meta">
			<view class="price">
				<text class="symbol">¥</text>
				<text class="number">{{ goodsResult?.price }}</text>
			</view>
			<view class="name ellipsis">{{ goodsResult?.name }} </view>
			<view class="desc"> {{ goodsResult?.desc }}</view>
		</view>
		<!-- 操作面板 -->
		<view class="action">
			<view class="item icon-right-after" @tap="openSkuPopup(SkuMode.Both)">
				<text class="label">选择</text>
				<text class="text ellipsis"> {{ selectArr }} </text>
			</view>
			<view class="item icon-right-after" @tap="openPopup('address')">
				<text class="label">送至</text>
				<text class="text ellipsis"> 请选择收获地址 </text>
			</view>
			<view class="item icon-right-after" @tap="openPopup('service')">
				<text class="label">服务</text>
				<text class="text ellipsis"> 无忧退 快速退款 免费包邮 </text>
			</view>
		</view>
		<!-- 商品详情 -->
		<view class="detail panel">
			<view class="title"> 详情 </view>
			<view class="properties">
				<!-- 属性详情 -->
				<view
					class="item"
					v-for="item in goodsResult?.details.properties"
					:key="item.name"
				>
					<text class="label">{{ item.name }}</text>
					<text class="value">{{ item.value }}</text>
				</view>
			</view>
			<!-- 图片详情 -->
			<image
				v-for="item in goodsResult?.details.pictures"
				:key="item"
				mode="widthFix"
				:src="item"
			></image>
		</view>

		<!-- 同类推荐 -->
		<view class="similar panel">
			<view class="title"> 同类推荐 </view>
			<view class="content">
				<NavigatorGoods
					v-for="good in goodsResult?.similarProducts"
					:key="good.id"
					:good="good"
				/>
			</view>
		</view>
	</scroll-view>
	<!-- 用户操作 -->
	<view
		class="toolbar"
		:style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }"
	>
		<view class="icons">
			<button class="icons-button"><text class="icon-heart"></text>收藏</button>
			<button class="icons-button" open-type="contact">
				<text class="icon-handset"></text>客服
			</button>
			<navigator class="icons-button" url="/pages/cart/cart-normal">
				<text class="icon-cart"></text>购物车
			</navigator>
		</view>
		<view class="buttons">
			<view class="add-cart" @tap="openSkuPopup(SkuMode.Car)">
				加入购物车
			</view>
			<view class="buy-now" @tap="openSkuPopup(SkuMode.Buy)"> 立即购买 </view>
		</view>
	</view>
	<!-- uni-popup 弹出层 -->
	<uni-popup ref="popupRef" type="bottom" background-color="#fff">
		<AddressPanel v-if="popupName === 'address'" @close="closePopup" />
		<ServicePanel v-if="popupName === 'service'" @close="closePopup" />
	</uni-popup>
	<!-- sku 组件 -->
	<vk-data-goods-sku-popup
		v-model="isShowSku"
		:localdata="localdata"
		:mode="mode"
		add-cart-background-color="#FFA868"
		buy-now-background-color="#27BA9B"
		:actived-style="{
			color: '#27BA9B',
			borderColor: '#27BA9B',
			backgroundColor: '#E9F8F5',
		}"
		ref="skuPopupRef"
		@addCart="onAddCart"
		@buyNow="onBuyNow"
	/>
</template>
<script lang="ts" setup>
import { getGoodsByIdApi } from '@/api/goods'
import { onShow } from '@dcloudio/uni-app'
import { computed, reactive, ref } from 'vue'
import ServicePanel from './components/ServicePanel.vue'
import AddressPanel from './components/AddressPanel.vue'
import GoodsSkeleton from './components/GoodsSkeleton.vue'
import type {
	SkuPopupEvent,
	SkuPopupInstance,
	SkuPopupLocaldata,
} from '@/components/vk-data-goods-sku-popup/vk-data-goods-sku-popup'
import { addCartApi } from '@/api/cart'

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

// 接收传递过来的 id 1666023
const { id } = defineProps<{ id: string }>()

// 获取商品详情信息
const goodsResult = ref<GoodsResult>()
const getGoodsResultById = async () => {
	const result = await getGoodsByIdApi(id)
	goodsResult.value = result
	// SKU组件所需格式 -- 按插件格式转换
	const { id: _id, name, mainPictures, skus, specs } = result
	localdata._id = _id
	localdata.name = name
	localdata.goods_thumb = mainPictures[0]

	localdata.sku_list = skus.map(sku => ({
		_id: sku.id,
		goods_id: _id,
		goods_name: name,
		image: sku.picture,
		price: Number(sku.price) * 100, // amountType默认 1 会除以100
		stock: sku.inventory,
		sku_name_arr: sku.specs.map(spec => spec.valueName),
	}))

	localdata.spec_list = specs.map(spec => ({
		name: spec.name,
		list: spec.values,
	}))
}

// 页面加载 -- token失效跳转 登录页--登陆成功跳回--不执行 onLoad =>onShow
onShow(() => getGoodsResultById())

// 轮播图变化时 获取 currentIndex
const currentIndex = ref(0)
const onChange: UniHelper.SwiperOnChange = event =>
	(currentIndex.value = event.detail.current)

// 点击图片时 大图预览
const onTapImage = (current: string) =>
	uni.previewImage({
		current,
		urls: goodsResult.value!.mainPictures,
		// loop: true, // 微信小程序 暂不支持 loop
	})

// uni-popup 弹出层 组件实例
const popupRef = ref<{
	open(type?: UniHelper.UniPopupType): void
	close(): void
}>()

// 具体显示的弹出层内容
const popupName = ref<'address' | 'service'>()
// 打开弹出层
const openPopup = (name: 'address' | 'service') => {
	popupName.value = name // 修改弹出层名称
	popupRef.value?.open()
}
// 关闭弹出层
const closePopup = () => popupRef.value?.close()

// sku
// 是否显示SKU组件
const isShowSku = ref(false)
// 商品信息
const localdata = reactive({} as SkuPopupLocaldata)

// 按钮模式 -- 1选择商品规 2加入购物车 3 立即购买
enum SkuMode {
	Both = 1,
	Car,
	Buy,
}
const mode = ref<SkuMode>(SkuMode.Both)

// 不同的方式打开 popup mode 为不同的模式
const openSkuPopup = (_mode: SkuMode) => {
	// 修改按钮模式
	mode.value = _mode
	// 显示SKU弹窗
	isShowSku.value = true
}

// 渲染被选中的值
const skuPopupRef = ref<SkuPopupInstance>()

/**
 * 被选中的值 选择完成后展示
 * 取消选中后 获得依旧是一个数组 ["",""].join(' ') = " " 为 true 所以 trim()
 */
const selectArr = computed(
	() => skuPopupRef.value?.selectArr?.join(' ').trim() || '请选择商品规格'
)

// 加入购物车事件
const onAddCart = async (e: SkuPopupEvent) => {
	const res = await addCartApi({ skuId: e._id, count: e.buy_num })
	uni.showToast({ title: '添加成功' })
	isShowSku.value = false
}

// 立即购买事件 -- 跳转到 创建订单页面
const onBuyNow = (e: SkuPopupEvent) =>
	uni.navigateTo({
		url: `/pagesOrder/create/create?skuId=${e._id}&count=${e.buy_num}`,
	})

// 立即购买
</script>
<style lang="scss">
/*
  page {
	height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
 */
.scroll-view {
	background-color: #f4f4f4;
}

/* 商品信息 */
.preview {
	height: 750rpx;
	position: relative;
	.indicator {
		position: absolute;
		bottom: 30rpx;
		right: 30rpx;
		height: 40rpx;
		line-height: 40rpx;
		padding: 0 24rpx;
		border-radius: 30rpx;
		color: #fff;
		font-family: Arial, Helvetica, sans-serif;
		background-color: rgba(0, 0, 0, 0.3);
		font-size: 22rpx;
		.current {
			font-size: 26rpx;
		}
		.split {
			margin: 0 2rpx;
		}
	}
}
.meta {
	position: relative;
	border-bottom: 1rpx solid #eaeaea;
	.price {
		height: 130rpx;
		line-height: 130rpx;
		padding: 0 30rpx;
		color: #fff;
		font-size: 34rpx;
		background-color: $primary-color;
		.number {
			font-size: 56rpx;
			margin-left: 2rpx;
		}
	}

	.brand {
		width: 160rpx;
		height: 80rpx;
		overflow: hidden;
		position: absolute;
		top: 26rpx;
		right: 30rpx;
	}
	.name {
		max-height: 88rpx;
		line-height: 1.4;
		margin: 20rpx;
		font-size: 32rpx;
		color: #333;
	}
	.desc {
		line-height: 1;
		margin: 0 20rpx 30rpx;
		font-size: 24rpx;
		color: $primary-price;
	}
}
.action {
	padding-left: 20rpx;
	.item {
		display: flex;
		align-items: center;
		position: relative;
		height: 90rpx;
		padding-right: 60rpx;
		border-bottom: 1rpx solid #eaeaea;
		font-size: 26rpx;
		color: #333;
		&:last-child {
			border-bottom: none;
		}
	}
	.label {
		width: 60rpx;
		color: #898b94;
		margin: 0 16rpx 0 10rpx;
	}
	.text {
		flex: 1;
		-webkit-line-clamp: 1; // 一行省略
	}
	.icon-right-after::after {
		font-size: 32rpx;
		color: #ccc;
	}
	/*   .arrow {
		&::after {
			position: absolute;
			top: 50%;
			right: 30rpx;
			content: '\e6c2';
			color: #ccc;
			font-family: 'rabbit' !important;
			font-size: 32rpx;
			transform: translateY(-50%);
		}
	} */
}
.preview,
.meta,
.action {
	background-color: #fff;
}
/* 商品详情 */
.detail {
	.title {
		margin-left: 20rpx !important;
	}
	.properties {
		padding: 0 20rpx;
		margin-bottom: 30rpx;
		.item {
			display: flex;
			line-height: 2;
			padding: 10rpx;
			font-size: 26rpx;
			color: #333;
			border-bottom: 1rpx dashed #ccc;
			&:first-child {
				border-top: 1rpx solid #ccc;
			}
		}
		.label {
			width: 200rpx;
		}
		.value {
			flex: 1;
		}
	}
	image {
		width: 100%;
	}
}
.panel {
	margin-top: 20rpx;
	background-color: #fff;
	overflow: hidden; //外边距塌陷
	.title {
		line-height: 1;
		margin: 30rpx 6rpx;
		padding-left: 10rpx;
		font-size: 28rpx;
		color: #333;
		font-weight: 600;
		border-left: 4rpx solid $primary-color;
	}
}
/* 同类推荐 */
.similar {
	.content {
		display: flex;
		flex-wrap: wrap;
		padding: 0 20rpx 200rpx;
		background-color: #f4f4f4;
		.goods {
			width: 340rpx;
			padding: 24rpx 20rpx 20rpx;
			margin: 20rpx 7rpx 0;
		}
		.image {
			width: 300rpx;
			height: 260rpx;
		}
	}
	/* 	navigator {
		&:nth-child(even) {
			margin-right: 0;
		}
	} */
}

/* 底部工具栏 */
.toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	background-color: #fff;
	// height: 100rpx;
	padding: 12rpx 20rpx var(--window-bottom);
	border-top: 1rpx solid #eaeaea;
	// box-sizing: content-box;
	.icons {
		display: flex;
		align-items: center;
		flex: 1;
		padding-right: 10rpx;
		.icons-button {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 0;
			margin: 0;
			line-height: 1.4;
			// text-align: center;
			font-size: 20rpx;
			background-color: #fff;
			color: #333;
			// &::after {
			// 	border: none;
			// }
			text {
				// display: block;
				font-size: 36rpx;
			}
		}
	}
	.buttons {
		display: flex;
		& > view {
			width: 220rpx;
			text-align: center;
			line-height: 72rpx;
			font-size: 26rpx;
			color: #fff;
			border-radius: 72rpx;
		}
		.add-cart {
			background-color: #ffa868;
		}
		.buy-now {
			background-color: $primary-color;
			margin-left: 20rpx;
		}
	}
}
</style>
